<template>
    <div>
        <el-container>
            <el-header>
                <el-row :gutter="20">
                    <el-col :span="18">
                        <el-input
                                placeholder="请输入内容"
                                v-model="page.keyword"
                                size="small"
                                maxlength="10"
                                class="input-search"
                                clearable>
                        </el-input>
                        <el-button type="primary" icon="el-icon-search" size="small">搜索</el-button>
                    </el-col>
                    <el-col :span="6">
                        <el-button type="text" @click="aData.visible = true">添加</el-button>
                    </el-col>
                </el-row>
            </el-header>
            <el-main>
                <div style="margin-top: 5px">
                    <el-table
                            :data="table.tableData"
                            v-loading="table.loading"
                            style="width: 100%">
                        <el-table-column
                                fixed
                                prop="ctime"
                                label="创建日期"
                                width="160"
                                :formatter="table.formatters.unix2Date">
                        </el-table-column>
                        <el-table-column
                                label="社区长"
                                width="180">
                            <template slot-scope="scope">
                                <el-popover trigger="hover" placement="top">
                                    <p>社区长id: {{ scope.row.districtHeadId }}</p>
                                    <div slot="reference" class="name-wrapper">
                                        <el-tag size="medium">{{ scope.row.username }}</el-tag>
                                    </div>
                                </el-popover>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="内容"
                                width="180">
                            <template slot-scope="scope">
                                <span v-if="scope.row.content<=8">{{ scope.row.content }}</span>
                                <span v-else>{{ scope.row.content.slice(1,8) }}...</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="180" fixed="right">
                            <template slot-scope="scope">
                                <el-button
                                        size="mini"
                                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                                <el-button
                                        size="mini"
                                        type="danger"
                                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-main>
            <el-footer>
                <div class="block">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="page.currentPage.current"
                            :page-sizes="[7,14,21,28]"
                            :page-size="page.currentPage.size"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="page.total">
                    </el-pagination>
                </div>
            </el-footer>
        </el-container>
        <!--弹出框-->
        <div>
            <el-dialog title="新增公告信息" :visible.sync="aData.visible" width="40%">
                <el-form :model="aData.form" :rules="aData.rules" ref="aForm" v-loading="aData.form.loading">
                    <el-form-item label="内容" prop="content" :label-width="formLabelWidth">
                        <el-input type="textarea" maxlength="300" show-word-limit autosize v-model="aData.form.content" autocomplete="off" placeholder="内容"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="aData.visible = false">取 消</el-button>
                    <el-button type="primary" @click="handleAdd">确 定</el-button>
                </div>
            </el-dialog>
            <el-dialog title="修改公告信息" :visible.sync="uData.visible" width="30%">
                <el-form :model="uData.form" :rules="uData.rules" ref="uForm" v-loading="uData.loading">
                    <el-form-item label="内容" prop="content" :label-width="formLabelWidth">
                        <el-input type="text" v-model="uData.form.content" autocomplete="off" placeholder="内容"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="uData.visible = false">取 消</el-button>
                    <el-button type="primary" @click="handleEdit">确 定</el-button>
                </div>
            </el-dialog>
            <el-dialog
                    title="提示"
                    :visible.sync="dData.visible"
                    width="30%"
                    center>
                <span>您确定要删除公告: {{dData.form.districtHeadId}}</span>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dData.visible = false">取 消</el-button>
                    <el-button type="primary" @click="handleDelete">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    export default {
        name: "notice",
        data() {
            return {
                //分页
                page: {
                    currentPage:{
                        current: 1,
                        size: 7,
                    },
                    total: 0,
                    keyword: ''
                },
                //表格
                table: {
                    tableData: [],
                    loading:false,
                    formatters:{
                        unix2Date:(row, column, cellValue)=>{
                            return this.unix2Date(cellValue);
                        },
                    }
                },
                //添加
                aData: {
                    visible: false,
                    loading: false,
                    form: {
                        content: "",
                    },
                    rules: {
                        content: [
                            { required: true, message: '请输入内容', trigger: 'blur' },
                            { min: 3, max:300, message: '长度于 3-300 个字符', trigger: 'blur' },
                        ],
                        districtHeadId:[
                            { required: true, message: '请输入社区长id', trigger: 'blur' },
                        ]
                    }
                },
                //修改
                uData: {
                    visible: false,
                    loading: false,
                    form: {
                        id: -1,
                        content: "",
                    },
                    rules: {
                        content: [
                            { required: true, message: '请输入内容', trigger: 'blur' },
                            { min: 3, max:300, message: '长度于 3-300 个字符', trigger: 'blur' },
                        ],
                    }
                },
                //删除
                dData: {
                    visible: false,
                    loading: false,
                    form: {
                        id: -1,
                        districtHeadId: -1,
                    },
                },
                formLabelWidth: '120px'
            }
        },
        methods: {
            //每页大小
            handleSizeChange(size) {
                console.log(`每页 ${size} 条`);
                this.page.currentPage.size=size;

                if (this.page.keyword){
                    this.handleSearch();
                }else {
                    let noticeVo=this.page.currentPage;
                    this.loadTableData(noticeVo);
                }
            },
            //当前页
            handleCurrentChange(current) {
                console.log(`当前页: ${current}`);
                this.page.currentPage.current=current;
                if (this.page.keyword){
                    this.handleSearch();
                }else {
                    let noticeVo=this.page.currentPage;
                    this.loadTableData(noticeVo);
                }
            },
            //修改
            handleEdit(index, row) {
                if(row){
                    //修改弹出框信息
                    console.log(`当前索引: ${index}`);
                    this.uData.form={
                        id: row.id,
                        content: row.content,
                    };
                    this.uData.visible=true;
                }else {
                    //提交公告修改信息
                    const _this = this;
                    this.$refs.uForm.validate((valid) => {
                        if (valid) {
                            _this.uData.loading=true;
                            let noticeVo=_this.uData.form;
                            this.putRequestJson("/notice/u",noticeVo)
                                .then(resp =>{
                                    if (resp && resp.data && resp.data.code === '200') {
                                        _this.uData.loading=false;
                                        _this.uData.visible=false;
                                        //清空数据
                                        _this.initField(_this.uData.form);
                                        // _this.uData.form={
                                        //     id: -1,
                                        //     content: "",
                                        // };
                                        _this.loadTableData(_this.page.currentPage);
                                    }else {
                                        _this.uData.loading=false;
                                    }
                                })
                        }
                    });
                }
            },
            //删除
            handleDelete(index, row) {
                if(row){
                    //修改弹出框信息
                    console.log(`当前索引: ${index}`);
                    this.dData.form={
                        id: row.id,
                        districtHeadId: row.districtHeadId
                    };
                    this.dData.visible=true;
                }else {
                    //提交公告删除信息
                    const _this = this;
                    _this.dData.loading=true;
                    let ids=[];
                    ids.push(_this.dData.form.id);
                    this.deleteRequest("/notice/d/"+ids)
                        .then(resp =>{
                            if (resp && resp.data && resp.data.code === '200') {
                                _this.dData.loading=false;
                                _this.dData.visible=false;
                                //清空数据
                                _this.initField(_this.dData.form);
                                // _this.dData.form={
                                //     id: -1,
                                //     districtHeadId: -1
                                // };
                                _this.loadTableData(_this.page.currentPage);
                            }else {
                                _this.dData.loading=false;
                            }
                        })
                }
            },
            //添加公告
            handleAdd(){
                const _this = this;
                this.$refs.aForm.validate((valid) => {
                    if (valid) {
                        _this.aData.loading=true;
                        let noticeVo=_this.aData.form;
                        this.postRequestJson("/notice/districtHeadSave",noticeVo)
                            .then(resp =>{
                                if (resp && resp.data && resp.data.code === '200') {
                                    _this.aData.loading=false;
                                    _this.aData.visible=false;
                                    //清空数据
                                    _this.initField(_this.aData.form)
                                    // _this.aData.form={
                                    //     content: "",
                                    // };
                                    _this.loadTableData(_this.page.currentPage);
                                }else {
                                    _this.aData.loading=false;
                                }
                            })
                    }
                });
            },
            //搜索
            handleSearch(){

            },
            //装载公告
            loadTableData(noticeVo){
                const _this = this;
                _this.table.loading=true;
                this.getRequest("/notice/districtHeadGetWithUserNameByPage",noticeVo)
                    .then(resp =>{
                        if (resp && resp.data && resp.data.code === '200') {
                            const data = resp.data;
                            _this.table.tableData=data.result.records;
                            _this.page.total=data.result.total;
                            _this.table.loading=false;
                        }else {
                            _this.table.loading=false;
                        }
                    })
            },
        },
        mounted() {
            //装载第一页数据
            let noticeVo = this.page.currentPage;
            this.loadTableData(noticeVo);
        }
    }
</script>

<style scoped>

    .input-search {
        width: 150px;
        margin-left: 300px;
    }

    .input-form{
        width: 150px;
    }

    .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        line-height: 200px;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        line-height: 150%;
    }
    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 150px;
        align-content: center;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }
</style>